<template>
  <n-card :bordered="false" class="rounded-16px shadow-sm">
    <div class="flex-y-center justify-between">
      <div class="flex-y-center">
        <img src="/logo.svg" alt="" class="w-70px h-70px" />
        <div class="pl-12px whitespace-nowrap">
          <h3 class="text-18px font-semibold">
            早安，{{ auth.userInfo.userName }}, 今天又是充满活力的一天！
          </h3>
          <p class="leading-30px text-[#999]">今日多云转晴，20℃ - 25℃！</p>
        </div>
      </div>
    </div>
    <n-space :size="36">
      <n-statistic v-for="item in statisticData" :key="item.id" v-bind="item"></n-statistic>
    </n-space>
  </n-card>
</template>

<script setup lang="ts">
import { NSpace, NStatistic } from 'naive-ui'
import { useAuthStore } from '@/store'

interface StatisticData {
  id: number
  label: string
  value: string
}

const auth = useAuthStore()

const statisticData: StatisticData[] = [
  {
    id: 0,
    label: '经验',
    value: '1年',
  },
  {
    id: 1,
    label: '项目数量',
    value: '10+',
  },
  {
    id: 2,
    label: '主要技术栈',
    value: 'TS,Vue3,Nodejs,Java,Python',
  },
]
</script>
<style scoped></style>
